<!-- 皮肤装扮 -->
<template>
    <div class="box">
        <div class="top">
            <div class="back" @click="$router.back()">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M25 5L10 20L25 35" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="font_title">皮肤装扮</div>         
        </div>
        <div class="content">
            <div class="skin_list">
                <div class="skin_title">
                    <span></span>
                    <p>图标</p>
                </div>
                <div class="skin_item" style="border: 2px solid gray;" v-for="item in iconList" @click="selectIcon(item)">
                   <img :src="item.img" alt="">
                   <p>{{item.name}}</p>
                   <div class="xz_active" v-if="item.is_active"></div>
                </div>
            </div>
            <div class="skin_list">
                <div class="skin_title">
                    <span></span>
                    <p>皮肤</p>
                </div>
                <div class="skin_item" v-for="item in styleList" @click="selectSkin(item)">
                   <img :src="item.img" alt="">
                   <p>{{item.name}}</p>
                   <div class="xz_active" v-if="item.xz_active"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted, reactive } from 'vue';
    import { useStore } from 'vuex';
    const store = useStore();
    
                
                
    const iconList = reactive([
    {
        "num" : 1,
        "name" : "灵动幻彩",
        "img": new URL('@/assets/my/icon_1.png', import.meta.url).href,
        "icon_name" : [
            {
                "title":"账单",
                "icon": "icon-a-008-virus",
            },
            {
                "title":"图表",
                "icon": "icon-a-049-molecule"
            },
            {
                "title":"记一笔",
                "icon": "icon-a-014-magnet"
            }, 
            {
                "title":"发现",
                "icon": "icon-a-009-rubbergloves" 
            },
            {
                "title":"我的",
                "icon": "icon-a-027-funnel"
            }
        ],
        "is_active" : false
    },
    {
        "num" : 2,
        "name" : "萌宠",
        "img": new URL('@/assets/my/icon_2.png', import.meta.url).href,
        "icon_name" : [
            {
                "title":"账单",
                "icon": "icon-cangshu",
            },
            {
                "title":"图表",
                "icon": "icon-hashiqi"
            },
            {
                "title":"记一笔",
                "icon": "icon-kedaya"
            }, 
            {
                "title":"发现",
                "icon": "icon-yang" 
            },
            {
                "title":"我的",
                "icon": "icon-sanhuamao"
            }
        ],
        "is_active" : false 
    },
    {
        "num" : 3,
        "name" : "清凉一夏",
        "img": new URL('@/assets/my/icon_3.png', import.meta.url).href,
        "icon_name" : [
        {
                "title":"账单",
                "icon": "icon-xigua",
            },
            {
                "title":"图表",
                "icon": "icon-mianxingshuiwen"
            },
            {
                "title":"记一笔",
                "icon": "icon-ice_cream"
            }, 
            {
                "title":"发现",
                "icon": "icon-yinliao" 
            },
            {
                "title":"我的",
                "icon": "icon-maerdaifu"
            }
        ],
        "is_active" : false 
    }
    ]);
    const styleList = reactive([
        {
            "num" : 1,
            "name" : "默认",
            "img": new URL('@/assets/my/banner.png', import.meta.url).href,
            "bg_color" : "#fb8fae",
            "xz_active" : true,  
        },
        {
            "num" : 2,
            "name" : "清凉一夏",
            "img": new URL('@/assets/my/banner2.png', import.meta.url).href,
            "bg_color" : "#17a099",
            "xz_active" : false
        },
        {
            "num" : 3,
            "name" : "黑客风云",
            "img": new URL('@/assets/my/banner3.png', import.meta.url).href,
            "bg_color" : "#29418b",
            "xz_active" : false
        },
        {
            "num" : 4,
            "name" : "暗紫晚霞",
            "img": new URL('@/assets/my/banner4.png', import.meta.url).href,
            "bg_color" : "#a1799a",
            "xz_active" : false
        },
        {
            "num" : 5,
            "name" : "森林绿",
            "img": new URL('@/assets/my/banner5.png', import.meta.url).href,
            "bg_color" : "#5f9f58",
            "xz_active" : false
        }

    ]);

    // 页面加载时设置当前选中的皮肤
    onMounted(() => {
        const currentSkin = store.state.skin;
        styleList.forEach(item => {
            item.xz_active = item.img === currentSkin.img;
        });
        // 检查是否有保存的图标数据
        const savedIcon = localStorage.getItem('selected-icon');
        if (savedIcon) {
            const iconData = JSON.parse(savedIcon);
            iconList.forEach(item => {
                item.is_active = item.num === iconData.num;
            });
        }
    });
    
    // 选择图标的方法
    const selectIcon = (selectedIcon) => {
        // 清除所有图标的选中状态
        iconList.forEach(item => item.is_active = false);
        // 设置选中的图标
        selectedIcon.is_active = true;
        
        // 保存到localStorage
        localStorage.setItem('selected-icon', JSON.stringify({
            num: selectedIcon.num,
            name: selectedIcon.name,
            icon_name: selectedIcon.icon_name
        }));
        // 触发自定义事件，通知TabBar更新
        window.dispatchEvent(new CustomEvent('icon-changed'));
    };

    // 选择皮肤的方法
    const selectSkin = (selectedSkin) => {
        // 清除所有皮肤的选中状态
        styleList.forEach(item => item.xz_active = false);
        // 设置选中的皮肤
        selectedSkin.xz_active = true;
        
        // 保存到Vuex（会自动保存到localStorage）
        store.commit('setSkin', {
            img: selectedSkin.img,
            bgColor: selectedSkin.bg_color
        });
    };
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100vh;
    .top {
        width: 100%;
        height: 100px;
        background-color: #fb8fae;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        .back {
            width: 120px;
            height: 100%;
            margin-left: 20px;
            line-height: 100px;
            text-align: center;
            display: flex;
            align-items: center;
            svg {
                width: 40px;
                height: 40px;
            }
        }
        .font_title {
            font-size: 32px;
            margin-left: 165px;
        }   
    }
    .content {
        width: 100%;
        margin-top: 100px;
        background-color: #fff;
        padding: 20px;
        .skin_list {
            width: 100%;
            display: flex;
            display: flex;          /* 启用Flexbox布局 */
            flex-wrap: wrap;        /* 允许换行 */
            column-gap: 50px;   
                .skin_title {
                    width: 100%;
                    height: 100px;
                    display: flex;
                    align-items: center;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    span {
                        width: 10px;
                        height: 40px;
                        background-color: #fb8fae;
                        margin-right: 20px;
                    }
                    p {
                        font-size: 32px;
                    }
                }
                .skin_item {
                    width: 330px;
                    height: 220px;
                    margin-bottom: 20px;
                    position: relative;
                    img {
                        width: 316px;
                        height: 170px;
                    }   
                    p {
                        font-size: 20px;
                        color: #333;
                    }
                    .xz_active {
                        position: absolute;
                        bottom: 20px;
                        right: 20px;
                        width: 20px;
                        height: 20px;
                        background-color: #06f016;
                        border-radius: 50%;
                    }
                }
        }            
    }
}
</style>
